 <template>
  <el-form ref="form" :model="form" label-width="85px" class="search_card">
    <el-form-item label="技术领域：">
      <el-checkbox-group v-model="form.techDomainInfos" size="small" @change="handleChangeData('techDomainInfos', 'TECHDOMAININFO')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.TECHDOMAININFO" :key="index" :label="item.name" >{{item.name}}</el-checkbox-button>
        <el-checkbox-button label="1">其他</el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="训练时长：">
      <el-checkbox-group v-model="form.trainingDurations" size="small" @change="handleChangeData('trainingDurations', 'DURATION')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.DURATION" :key="index" :label="item.name" >{{item.label}}</el-checkbox-button>
      </el-checkbox-group>
      <e-input-number-range v-model="input.trainingDurations" :no-zero="true" size="small" :max="200" @change="handleInputNum($event, 'trainingDurations')"/> 分钟
    </el-form-item>
    <el-form-item label="教学教法：">
      <el-checkbox-group v-model="form.teachingInfos" size="small" @change="handleChangeData('teachingInfos', 'TEACHINGINFO')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.TEACHINGINFO" :key="index" :label="item.name" >{{item.name}}</el-checkbox-button>
        <el-checkbox-button label="1">其他</el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="训练强度：">
      <el-checkbox-group v-model="form.trainingIntensions" size="small" @change="handleChangeData('trainingIntensions', 'INTENSION')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.INTENSION" :key="index" :label="item.name" >{{item.label}}</el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="适用年龄：">
      <el-checkbox-group v-model="form.ageInfos" size="small" @change="handleChangeData('ageInfos', 'AGEINFO')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.AGEINFO" :key="index" :label="item.name" >{{item.label}}</el-checkbox-button>
      </el-checkbox-group>
      <e-input-number-range v-model="input.ageInfos" :no-zero="true" size="small" :max="30" @change="handleInputNum($event, 'ageInfos')"/> 岁
    </el-form-item>
    <el-form-item label="学员规模：">
      <el-checkbox-group v-model="form.scopeInfos" size="small" @change="handleChangeData('scopeInfos', 'SCOPEINFO')">
        <el-checkbox-button label="">不限</el-checkbox-button>
        <el-checkbox-button v-for="(item,index) in setData.SCOPEINFO" :key="index" :label="item.name" >{{item.label}}</el-checkbox-button>
      </el-checkbox-group>
      <e-input-number-range v-model="input.scopeInfos" :no-zero="true" size="small" :max="100" @change="handleInputNum($event, 'scopeInfos')"/> 人
    </el-form-item>
  </el-form>
</template>
<script>
import { ModeData } from './../modeData'
import EInputNumberRange from '@e-ui/InputNumberRange'
export default {
  props: {
    serachQuery: {
      default: {}
    }
  },
  components: {
    EInputNumberRange
  },
  watch: {
    'serachQuery': {
      handler: function (val) {
        this.setSearchData(val)
      },
      deep: true
    }
  },
  mounted () {
    this.setSearchData(this.serachQuery)
  },
  data () {
    return {
      loading: false, // 必需要返回loading
      setData: ModeData,
      input: {
        trainingDurations: [0, 0],
        ageInfos: [0, 0],
        scopeInfos: [0, 0]
      },
      form: {
        techDomainInfos: [''],
        trainingDurations: [''],
        teachingInfos: [''],
        trainingIntensions: [''],
        ageInfos: [''],
        scopeInfos: ['']
      }
    }
  },
  methods: {
    handleChangeData (formName, dataName) { // 选中值处理
      if (this.form[formName].length === 0) {
        this.form[formName] = ['']
      } else {
        if (this.form[formName].includes('') && this.form[formName][this.form[formName].length - 1] === '') { // 不限
          this.form[formName] = ['']
        } else if (this.form[formName].includes('1') && this.form[formName][this.form[formName].length - 1] === '1') { // 其他
          this.form[formName] = ['1']
        } else { // 多选项
          let newSetData = []
          let newFormData = []
          this.setData[dataName].forEach((item) => {
            newSetData.push(item.name)
          })
          this.form[formName].forEach((item, index) => {
            if (newSetData.includes(item)) {
              newFormData.push(item)
            }
          })
          this.form[formName] = newFormData
          if (this.input[formName]) {
            this.input[formName] = [0, 0]
          }
        }
      }
      this.input[formName] = [0, 0]
      this.$emit('updateSearch', this.form)
    },
    handleInputNum (val, formName) { // 输入筛选值
      if (val[0] === 0) {
        this.$set(val, 0, 1)
      }
      this.form[formName] = [val[0] + '-' + val[1]]
      this.$emit('updateSearch', this.form)
    },
    setSearchData: function (val) {
      let keyArray = ['trainingDurations', 'ageInfos', 'scopeInfos']
      let keyData = {
        techDomainInfos: 'TECHDOMAININFO',
        trainingDurations: 'DURATION',
        teachingInfos: 'TEACHINGINFO',
        trainingIntensions: 'INTENSION',
        ageInfos: 'AGEINFO',
        scopeInfos: 'SCOPEINFO'
      }
      if (JSON.stringify(val) !== '{}') {
        for (let i in val) {
          this.form[i] = val[i]
          let scope = this
          if (keyArray.includes(i)) { // 匹配自定义输入项
            this.setData[keyData[i]].forEach((item, index) => {
              if (!(val[i].includes(item.name))) {
                scope.input[i] = val[i][0] ? val[i][0].split('-') : [0, 0]
              }
            })
          }
        }
        // console.log('重新渲染')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.search_card{
  margin-bottom:50px;
  .el-form-item{
    margin-bottom:0;
    .el-form-item__label{
      padding-top:13px;
    }
  }
  .el-checkbox-group{
    display: inline-block;
  }
  .el-checkbox-button__inner,.el-checkbox-button:first-child{
    border:none!important;
  }
  .el-checkbox-button--small .el-checkbox-button__inner{
    padding:11px 20px 11px 0;
  }
  .el-checkbox-button.is-checked .el-checkbox-button__inner{
    border:none;
    background:none;
    color:#24c881;
    box-shadow:none;
    -webkit-box-shadow:none;
  }
  .el-checkbox-button.is-disabled .el-checkbox-button__inner{
    border:none;
    background:none;
  }
  .input-number-range{
    width:120px;
  }
}
</style>
 